<script setup lang="ts">
defineOptions({
  name: "CardItem"
});
defineProps({
  type: {
    type: [Number, String],
    default: 1
  }
});
const classNames: any = {
  1: "bg-[url(@/assets/svg/Frame_11.svg)] shadow-[0px_2px_4px_0px_rgba(50,233,188,0.44)]",
  2: "bg-[url(@/assets/svg/Frame_12.svg)] shadow-[0px_2px_4px_0px_rgba(141,113,255,0.43)]",
  3: "bg-[url(@/assets/svg/Frame_10.svg)] shadow-[0px_2px_4px_0px_rgba(84,37,201,0.34)]",
  4: "bg-[url(@/assets/svg/Frame_13.svg)] shadow-[0px_2px_4px_0px_rgba(124,95,247,0.2)]"
};
</script>
<template>
  <div
    :class="[
      'w-180 h-140 shrink-0 center rounded-10 bg-no-repeat bg-cover',
      // 'w-180 h-140 shrink-0 center rounded-10 bg-no-repeat bg-cover first-of-type:ml-14 last-of-type:mr-14',
      classNames[type]
    ]"
  >
    <div class="flex-col center gap-y-8">
      <slot></slot>
    </div>
  </div>
</template>
